<template>
  <div class="swiper-time-line">
    <span class="swiper-time-title">重点关注</span>
    <ul
      class="swiper-time-container"
    >
      <li
        v-for="focus in focusList"
        :key="focus"
        class="swiper-time"
      >
        <span
          v-html="focus.userPhoto"
          class="user-photo"
        />
        <div class="swiper-time-li-con">
          <span
            :class="{'isRead':focus.isYd=='1'}"
            @click="showDetail(focus)"
            class="swiper-time-stit"
          ><i
            :style="'color:'+focus.color"
            style="margin-right: 10px;line-height: 20px;font-size:12px;"
            class="jeicon jeicon-stars"
          />{{ focus.newsTitle }}</span>
          <div class="swiper-time-con-detail">
            <span>{{ focus.time }}</span>
            <div>
              <span>阅 {{ focus.ydsl }}</span>
              <span>评 {{ focus.plsl }}</span>
              <span>赞 {{ focus.dzsl }}</span>
            </div>
          </div>
        </div>
      </li>
      <li
        v-show="loadMore&&focusList.length!=0&&focusList.length>=10"
        class="swiper-load-more"
      >
        -----------无更多数据---------
      </li>
      <li
        v-if="!focusList.length"
        class="nodata"
      >
        <img
          src="../../assets/images/je-nodata.png"
          alt=""
          srcset=""
        >
        <span>暂无数据</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { fetchFocus, fetchSingleNews } from '../../common/portal';
import { EventBus } from '../../common/eventBus';
import { COMMON } from '../../common/params';

export default {
  name: 'Timeline',
  props: {
    mhId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      focusList: '',
      loadMore: false,
      lineParams: {
        JE_MHXW_MH_ID: '',
        start: 0,
        limit: 20,
      },
    };
  },
  mounted() {
    this.lineParams.JE_MHXW_MH_ID = this.mhId;
    this.getPage(this.lineParams);
    EventBus.$on(COMMON.BACKFROMDETAIL, (terget) => {
      this.refreshNews(terget);
    });
    EventBus.$on(COMMON.SCROLLLOAD, () => {
      this.load();
    });
  },
  methods: {
    async refreshNews(id) {
      const newsData = await fetchSingleNews({ JE_MHXW_XW_ID: id });
      const index = this.focusList.findIndex(cardItem => cardItem.newsId == id);
      if (index >= 0) {
        this.focusList[index].ydsl = newsData.newsYdsl;
        this.focusList[index].dzsl = newsData.newsDzsl;
        this.focusList[index].isYd = newsData.newsIsyd;
        this.focusList[index].plsl = newsData.newsPlsl;
        this.$set(this, this.focusList[index], this.focusList[index]);
      }
    },
    showDetail(data) {
      EventBus.$emit(COMMON.NEWSDEATIL, data.newsId);
    },
    async getPage(params) {
      this.focusList = await fetchFocus(params);
    },
    async load() {
      // 此处处理无限加载
      if (!this.loadMore) {
        this.lineParams.start += 20;
        const SearchNews = await fetchFocus(this.lineParams);
        if (SearchNews.length) {
          this.focusList.concat(SearchNews);
        } else {
          this.loadMore = true;
        }
      }
    },
  },
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .swiper-time-line{
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding:4px 20px;
    overflow: hidden;
    height: calc(100% - 180px);
    flex-direction:column;
    .nodata{
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #999;
    }
    .swiper-time-title{
      font-size: 18px;
      line-height: 40px;
      height:40px;
      cursor: pointer;
      padding-left:30px;
      background: url('../../assets/images/focus.png')no-repeat;
      background-size: 18%;
    }
    ul{
      padding: 0;
      margin:0;
      flex:1;
      overflow: hidden;
      // overflow-y: scroll;
      height: calc(100% - 40px);
      .swiper-load-more{
        color: #999;
        line-height: 30px;
        flex: 1;
        justify-content: center;
      }
      li{
        border-bottom:1px solid #EEEEEE;
        padding:10px 0;
        display: flex;
        .swiper-time-li-con{
          display: flex;
          flex:1;
          flex-direction: column;
          .swiper-time-stit{
            font-size: 14px;
            padding-bottom:4px;
            color: #000;
            cursor: pointer;
          }
          .swiper-time-stit.isRead{
            color:#737373;
          }
          .swiper-time-stit:hover{
            color: #007aff;
          }
          .swiper-time-con-detail{
            display: flex;
            font-size:12px;
            color: #999;
            justify-content: space-between;
            .jeicon{
              margin:0 4px 0 8px
            }
          }
        }

        .user-photo{
          width: 40px;
          height:40px;
          // color: #fff;
          border-radius: 50%;
          line-height: 40px;
          // background: #007aff;
          margin-right:10px;
          text-align: center;
          font-size: 14px;
        }
      }
      li:last-child{
        border-bottom:0;
      }
    }
  }
</style>
